<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>表单与表格页面</title>
  <!-- 引入 Element UI 的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
      padding: 40px;
      background-color: #f5f7fa;
    }
    .form-container {
      margin-bottom: 30px;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
    .table-container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

<div id="app">
  <div class="form-container">
    <h2>用户信息表单</h2>
    <el-form :model="formData" label-width="100px" @submit.prevent="submitForm">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">
            <el-input-number v-model="formData.age" :min="0" :max="120"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" native-type="submit">提交</el-button>
        </el-col>
      </el-row>
    </el-form>

  </div>

  <div class="table-container">
    <h2>已提交数据</h2>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 再引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      formData: {
        name: '',
        email: '',
        age: null
      },
      tableData: []
    };
  },
  methods: {
    submitForm() {
      if (!this.formData.name || !this.formData.email || !this.formData.age) {
        alert('请填写所有字段');
        return;
      }

      // 添加数据到表格
      this.tableData.push({ ...this.formData });

      // 清空表单
      this.formData = {
        name: '',
        email: '',
        age: null
      };
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    }
  }
});
</script>

</body>
</html>